<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul{
      border: 1px red solid;
      width: 300px;
    }
    img{
      display: block;
      width: 300px;
      height: 300px;
    }
  </style>
    <script>

    //   window.onload = function () {
    //     var ul1 = document.getElementById("ul");

    //   console.log(ul1.offsetHeight);

    // }
  </script>
</head>

<body>
  <script>

  //   window.onload = function () {
  //     var ul1 = document.getElementById("ul");
  //   console.log(ul1.offsetHeight);
  // }
</script>
  <ul id="ul">
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
    <li><img src="../img/QQ图片20221222111355.jpg" alt=""></li>
  </ul>
  <script>
    var ul1 = document.getElementById("ul");
    var imgs = ul1.querySelectorAll("li img");
    console.dir(imgs);
    // 获取ul高度
    // 由于图片加载时间过长，为避免等待，图片执行过程会先执行后面的js
  
    console.log(ul1.offsetHeight);
    console.log(ul1.clientHeight);
    // 只有等图片执行完成后，才立即执行事件函数
    // 给img加等待
    var sum = 0
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onload = function () {
        sum++
        if (sum === imgs.length) {
          console.log(ul1.offsetHeight);
        }
      }  
    }
    // 给window添加绑定事件
    // 一个页面只能有一个onload事件（后面会覆盖前面的）
    window.onload = function () {
      console.log(ul1.offsetHeight);
    }
  </script>
</body>
</html>